<template>
  <el-table :data="tableData" border>
    <!-- <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址" width="180" show-overflow-tooltip>

    </el-table-column> -->
    <el-table-column :show-overflow-tooltip="item.showTooltip" align="center" v-for="item in tableCol" :prop="item.prop"
      :label="item.label" :width="item.width" :key="item.id">
      <!-- <template slot-scope="scope">
      <div v-if="item.isSlot">
        <div v-for="(v1,index) in scope.row.name" :key=index>{{ v1}}</div>
      </div>
      <div v-else>{{scope.row[item.prop]}}</div>
    </template> -->
      <!-- class="cell-content" -->
      <template slot-scope="scope">
        <div class="cell-content">
          <template v-if="item.isSlot">
            <!-- 循环渲染数组时，用一个容器包裹所有子元素 -->
            <div class="multi-line-content">
              <div v-for="(v1, index) in scope.row.name" :key="index">
                {{ v1 }}
              </div>
            </div>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "MyTable",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: ['王小虎', '王小虎', '王小虎', '王小虎', '王小虎',],
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: ['王小虎', '王小虎', '王小虎', '王小虎', '王小虎', '王小虎', '王小虎', '王小虎',],
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: ['王小虎', '王小虎', '王小虎',],
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: ['王小虎', '王小虎', '王小虎',],
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableCol: [
        {
          id: "000001",
          prop: "date",
          label: "日期",
          width: "120",
          showTooltip: false  // 日期列关闭 tooltip
        },
        {
          id: "000002",
          prop: "name",
          label: "姓名",
          width: "180",
          isSlot: true,
          showTooltip: true   // 姓名列启用 tooltip
        },
        {
          id: "000003",
          prop: "address",
          label: "地址",
          width: "180",
          showTooltip: true    // 地址列启用 tooltip

        },
      ]
    }
  }
}
</script>
<style scoped>
/* 基础单元格样式：确保内容容器充满列宽 */
.cell-content {
  width: 100%;
  padding: 0 4px;
  /* 预留一点内边距，避免内容贴边 */
  box-sizing: border-box;
}

/* 多行内容的溢出控制（针对 name 列的数组渲染） */
.multi-line-content {
  max-height: 60px;
  /* 根据需求设置最大高度（如 3 行文本的高度） */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 多行文本截断的关键属性 */
  -webkit-line-clamp: 3;
  /* 最多显示 3 行，超出部分省略 */
  -webkit-box-orient: vertical;
}

/* 单行内容的溢出控制（针对 date、address 等普通文本） */
.cell-content:not(.multi-line-content) {
  white-space: nowrap;
  /* 强制单行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>